<template>
	<div class="ranking">
		<header>
			<div class="rank_back"></div>
			<div class="banner">
				<template v-if="openState">
					<div class="btn_area">
						<a href="javascript:;" class="btn_share1" @click="mainShare()"><em></em>分享活动</a>
					</div>
				</template>
				<template v-else>
					<div class="btn_area">
						<!--未开通-->
						<a href="javascript:;" class="btn_share" @click="mainShare()"><em></em>分享活动</a>
						<a href="javascript:;" class="btn_open" @click="openright()"><em></em>立即开通</a>
					</div>
				</template>
				<p class="time">06月19日-08月31日</p>
			</div>
			<div class="rank_banner">
				<div class="rank_yun">

				</div>
			</div>

		</header>
		<div class="content_rank">
			<div class="content_tit"></div>
			<div class="content_place">
				<div class="rank_place">
					<span class="rank_s1">名次</span><span class="rank_s2">内容</span>
				</div>
				<div class="rank_list">
					<template v-if="items.length>0">
						<div class="list" v-for="(item,index) in items">
							<div v-if="item.sort==1" class="list_left list_one">{{item.sort}}</div>
							<div v-if="item.sort==2" class="list_left list_two">{{item.sort}}</div>
							<div v-if="item.sort==3" class="list_left list_three">{{item.sort}}</div>
							<div v-if="item.sort>3" class="list_left list_next">{{item.sort}}</div>
							<div :class="{list_center:true,au_stop:pl_state[index]}" @click="play(index)"></div>
							<div class="list_right">
								<p>作品名称：{{item.textName}}</p>
								<p>已获票数{{item.numPolls}}</p>
							</div>
							<input type="hidden" v-model="item.pathOfText" />
						</div>
					</template>
					<template v-else>
						<div class="nomsg">暂无排名信息</div>
					</template>

					<!--<div class="list_one list">
						<div class="list_left">1</div>
						<div class="list_center"></div>
						<div class="list_right">
							<p>作品名称：三打白骨精</p>
							<p>已获票数1034</p>
						</div>
					</div>
					<div class="list_next list">
						<div class="list_left">5</div>
						<div class="list_center"></div>
						<div class="list_right">
							<p>作品名称：三打白骨精</p>
							<p>已获积分1034</p>
						</div>
					</div>-->
				</div>
				<div class="fenye">
					<ul class="pagelist" maxshowpageitem="5" pagelistcount="5" id="pagelist"></ul>
				</div>
			</div>
		</div>
		<audio ref="audio" :src='audio_url' @ended="playend"></audio>
	</div>
</template>
<script type="text/ecmascript-6">
	export default {
		data() {
			return {
				openstate: this.$store.state.opendate,
				items: [],
				pageindex: 1, //当前显示第几页
				size: 5, //每页显示数量
				sumlist: '', //列表总数
				audio_url: '', //播放地址
				pl_state: [false, false, false, false, false],
			}
		},
		computed: {
			openState() {
				return this.openstate ? true : false;
			}
		},
		mounted() {
			console.log(this.$refs);
		},
		created() {
			this.$store.commit('showrank');
			this.$store.commit('hidebonus');
			this.$store.commit('hideact');
			this.$http.get(domain + '/API/SummerAct/GetStuSortList', {
				params: {
					'pageindex': this.pageindex,
					'size': this.size,
					'intcityID': this.$store.state.city_id
				}
			}).then(res => {
				let dt = res.body.sortList;
				let sum = res.body.total;
				this.items = dt;
				this.sumlist = sum;
				console.log(this.sumlist);
				$("#pagelist").initPage(this.sumlist, 1, this.rpage);
			});
		},
		methods: {
			openright() {
				location.href = comweb + '/open/2/code?tbkt_token=' + this.$store.state.token;
			},
			luzhi() {
				this.$router.push('/record');
			},
			rpage() {
				this.initState();
				let that = this;
				let cur_page = arguments[0];
				this.$http.get(domain + '/API/SummerAct/GetStuSortList', {
					params: {
						'intcityID': this.$store.state.city_id,
						'pageindex': cur_page,
						'size': this.size
					}
				}).then(res => {
					let dt = res.body.sortList;
					that.items.splice(0, 5, ...dt);
				});
			},
			play(index) {
				let _url = this.items[index].pathOfText || '';
				this.audio_url = media_ads + _url.replace('/UploadFileS', '');
				let that = this;
				if(that.pl_state[index] == false) {
					this.initState();
					that.pl_state.splice(index,1,true);
					this.$nextTick(() => {
						this.$refs.audio.play();
					});
				} else {
					that.pl_state.splice(index,1,false);
					this.$nextTick(() => {
						this.$refs.audio.pause();
					});
				}
			},
			initState() {
				let that = this;
				this.pl_state.forEach((n, i) => {
					that.pl_state.splice(i, 1, false);
				})
			},
			playend() {
				this.$refs.audio.pause();
				this.initState();
			},
			mainShare() {
				var _url = "http://www.tbkt.cn/yd_login/?wap=1%20?location=0";
				var title='';
				this.$http.post(mapihd + '/huodong/sx_summer/s/award/detail', {
					'app_id': 43
				}).then(res => {
					let dt = res.body;
					if(dt.response == 'ok') {
						let rl = dt.data.my_award;
						let pl = dt.data.all_award;
						let rl_text=rl[rl.length-1][1];
						if(rl.length>0){
							title="太棒了，我在同步课堂 '暑假作业大作战！'活动中抽中了"+rl_text+"大奖，你也来试试？http://www.tbkt.cn/yd_login/?wap=1%20?location=0"
						}else{
							title='缤纷暑假赢大奖，ipad壕礼抽不停！快来参加同步课堂暑假活动吧。http://www.tbkt.cn/yd_login/?wap=1%20?location=0'					
						}
					}
				});
				try {
					appobject.Interactive("ys_share," + _url + "|" + title);
				} catch(e) {
					layer.tips('PC端不支持此功能');
					return;
				}
				this.$http.get(domain + '/API/SummerAct/ShareRecord', {
					params: {
						'intStuID': this.$store.state.stu_id,
						'strStuName': this.$store.state.stu_name,
						'intClassID': this.$store.state.class_id,
						'strOpenDate': this.$store.state.opendate,
						'strShareTime': new Date().Format('yyyy-MM-dd hh:mm:ss'),
						'intSID': this.$store.state.school_id,
						'strSName': this.$store.state.school_name,
						'intcityID': this.$store.state.city_id
					}
				}).then(res => {
					let stumsg = res.body[0];
					if(stumsg == true) {
						layer.tips("分享成功，获得100积分")
					} else {
						layer.tips("分享成功")
					}
				})

			}
		}

	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../../assets/scss/common";
	.ranking {
		padding-bottom: 70px/$ppr;
		background: #f5ddb9;
		header {
			.rank_back {
				position: absolute;
				z-index: 5;
				left: 24px/$ppr;
				top: 15px/$ppr;
				width: 64px/$ppr;
				height: 64px/$ppr;
				background-image: url(./img/r_back.png);
				background-size: 100% 100%;
			}
			.rank_banner {
				position: relative;
				top: -36px/$ppr;
				width: 720px/$ppr;
				height: 493px/$ppr;
				background-image: url(./img/rank_banner.png);
				background-size: 100% 100%;
				border-top: 1px solid #57af00;
				.rank_yun {
					box-sizing: border-box;
					padding-top: 45px/$ppr;
					width: 624px/$ppr;
					height: 387px/$ppr;
					background-image: url(./img/rank_yun.png);
					background-size: 100% 100%;
					margin: 0 auto;
					margin-top: 80px/$ppr;
					font-size: 28px/$ppr;
					text-align: center;
					line-height: 40px/$ppr;
				}
			}
		}
		.content_rank {
			background-color: #6ed8f3;
			height: 1070px/$ppr;
			position: relative;
			top: -70px/$ppr;
			.content_tit {
				width: 720px/$ppr;
				height: 150px/$ppr;
				background-image: url(./img/water.png);
				background-size: 100% 100%;
			}
			.content_place {
				width: 670px/$ppr;
				height: 845px/$ppr;
				margin: 0 auto;
				background-color: #FFFFFF;
				border-radius: 25px/$ppr;
				position: relative;
				.rank_place {
					height: 90px/$ppr;
					background-color: #c9f4ff;
					border-radius: 25px/$ppr 25px/$ppr 0 0;
					line-height: 90px/$ppr;
					font-size: 28px/$ppr;
					color: #333333;
					padding-left: 30px/$ppr;
					.rank_s2 {
						float: right;
						margin-right: 146px/$ppr;
					}
				}
				.rank_list {
					.list {
						height: 120px/$ppr;
						&:after {
							display: table-cell;
							content: '';
							clear: both;
						}
						.list_left {
							background-size: 100% 100%;
							text-align: center;
							font-size: 36px/$ppr;
							color: #FFFFFF;
							float: left;
							margin-left: 30px/$ppr;
							margin-top: 20px/$ppr;
						}
						.list_center {
							width: 66px/$ppr;
							height: 66px/$ppr;
							background-image: url(./img/angin1.png);
							background-size: 100% 100%;
							float: left;
							margin-top: 20px/$ppr;
							margin-left: 110px/$ppr;
						}
						.au_stop {
							background-image: url(./img/stop.png);
							background-size: 100% 100%;
						}
						.list_right {
							font-size: 28px/$ppr;
							margin-top: 20px/$ppr;
							float: right;
							margin-right: 20px/$ppr;
							color: #74add9;
							line-height: 40px/$ppr;
							width: 290px/$ppr;
							p:first-child {
								width: 100%;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
					.list_one {
						width: 62px/$ppr;
						height: 82px/$ppr;
						background-image: url(./img/first.png);
						line-height: 60px/$ppr;
					}
					.list_two {
						width: 62px/$ppr;
						height: 82px/$ppr;
						background-image: url(./img/secend.png);
						line-height: 60px/$ppr;
					}
					.list_three {
						width: 62px/$ppr;
						height: 82px/$ppr;
						background-image: url(./img/third.png);
						line-height: 60px/$ppr;
					}
					.list_next {
						width: 62px/$ppr;
						height: 62px/$ppr;
						background-image: url(./img/next.png);
						line-height: 60px/$ppr;
						color: #333333 !important;
					}
				}
			}
		}
		.fenye {
			background: #c9f4ff;
			height: 155px/$ppr;
			display: flex;
			justify-content: center;
			border-radius: 0 0 25px/$ppr 25px/$ppr;
			position: absolute;
			width: 100%;
			bottom: 0;
		}
		.nomsg {
			font-size: 35px/$ppr;
			text-align: center;
			color: red;
			margin-top: 30%;
		}
	}
</style>